<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
		 img{
			 width: 200px;		 
		 }
    
		  /* 并列选择器：选中img元素处于“鼠标悬停”状态 */
			img:hover{
			width: 230px;	 
		  }
	   
		 /* 按钮背景色平时是红色,鼠标悬停是紫色,鼠标按下时粉红色 */
	   button{
			  background-color: red;
			}
	    button:hover{
				background-color: purple;				
			}
	    button:active{
				background-color: pink;
			}
	   /* 超链接未被访问时,颜色为yellow;鼠标悬停时颜色为orange;被激活时颜色为green;被访问过后颜色为gray */
	   
		 a:link{  /* 未被访问过 */
			 color: yellow;
		 }		
	   a:visited{   /* 鼠标悬停 */
			 color: gray;
		}
		 a:hover{     /* 激活状态 */
			 color:orange
		}
	   a:active{    /* 访问过后 */
			 color: green;
		}
		/* 输入框平时边框为浅绿色(lightgreen),获得焦点时边框变为深绿色(dimgreen) */
		 input{
			  border: 1px solid lightgreen;
		 }
		  input:focus{
				 border: 1px solid darkgreen;
		 }
		 
		 /* 选中具有readonly属性的输入框,边框设为3px solid gray */
		 input[readonly]{
	        border: 3px solid gray;		 
		 }
		 /* 选中具有name属性,且属性值为uname的输入框,设置背景色为淡黄色 */
	   input[name="uname"]{
			   background-color: lightyellow;
		 }
		 
	</style>

	</head>
	<body>
    <img src="css/img/study_computer_img3.png" >	
		<button>添加到购物车</button>
    <a href="//taobao.com">访问百度</a>
	
	  <input type="text">

  	<hr>

  	<input type="text">
  	<input type="text" readonly>
  	<input type="text" name="uname">
	  <input type="password" name="upwd">
	 </body>
</html>
